|
首先介绍一下v-combobox组件，这个组件是下拉框与输入框的完美结合。用户不仅可以进行下拉框选择，还可以自定义输入。
详细API可查看该链接：https://vuetifyjs.com/zh-Hans/api/v-combobox/
 项目实现要求，页面展示出的是中文字段，而与后端交互，数据则是与其对应的英文字段
名称
let claimObj = {
userid: "成员ID",
userclaim: "成员声明"
};
export default {
data(){
return {
mappings:[],
claimDatas: ["成员ID","成员声明"],
}
},
created(){
this.getCurIdData(this.$route.params.id)
},
methods:{
//获取mappings列表数据
getCurIdData(id) {
this.$http
.get(`/api/${id}`)
.delegateTo(api_request)
.then(data => {
this.mappings = data.mappings.map(item => {
item.claim =
claimObj[item.claim] !== undefined
? claimObj[item.claim]
: item.claim;
return item;
});
}
});
},
//点击保存
saveMapping() {
let newMapDatas = this.mappings.map(item => {
for (let key in claimObj) {
item.claim = claimObj[key] === item.claim ? key : item.claim;
}
return item;
});
let params = {
mappings: newMapDatas
};
this.$http
.patch(
`/api/${this.$route.params.id}`,
params
)
.delegateTo(api_request)
.then(() => {
return "保存成功";
})
.catch(({ code, message }) => {
throw `保存失败：${this.$t("api." + code)}, 额外信息: ${"api." +
JSON.stringify(message)}`;
})
.delegateTo(this.$snackbar.delegate);
},
}
}
|